<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-24 08:35:56
 * @LastEditTime: 2019-10-08 16:45:14
 * @LastEditors: Please set LastEditors
 -->
<template>
    <div class="newIndex">
        <!-- 标题banner -->
        <div class="date">
            <img src="/static/images/newIndex_title.png" alt="">
            <span class="day">{{nowDate.days}}</span>
            <span class="month">{{nowDate.month}}</span>
        </div>
        
        <!-- 选择科目和答题游戏 -->
        <div class="choose">
            <h2>请选择科目<span>更多<img src="/static/images/right_double.png" alt=""></span></h2>
            <ul>
                <li @click.stop="clickItem(1,1)">语文</li>
                <li @click.stop="clickItem(1,2)">数学</li>
                <li @click.stop="clickItem(1,3)">英语</li>
            </ul>
            <h2>答题游戏<span>更多<img src="/static/images/right_double.png" alt=""></span></h2>
            <ul>
                <li @click.stop="clickItem(2,1)">语文</li>
                <li @click.stop="clickItem(2,2)">数学</li>
                <li @click.stop="clickItem(2,3)">英语</li>
            </ul>
        </div>
        <!-- 阴影背景 -->
        <div style="height:20rpx;background:#f0f2f7;"></div>
        <!-- 收集类 -->
        <div class="collect">
            <ul>
                <li @click="go('solving',true)">
                    <img src="/static/images/wrongQuestion.png" alt="">
                    <p>错题集</p>
                </li>
                <li @click="go()">
                    <img src="/static/images/singleQuery.png" alt="">
                    <p>单词查询</p>
                </li>
                <li @click="go('slect',true)">
                    <img src="/static/images/shooting.png" alt="">
                    <p>拍题</p>
                </li>
                <li @click="go()">
                    <img src="/static/images/syncExercises.png" alt="">
                    <p>同步练习</p>
                </li>
            </ul>
        </div>

        
        <!-- 遮挡模板层 -->
        <div class="mark" v-show="userStatus.mark_isShow" @click="markHidden">
            <div>
                <h2>请选择模式</h2>
                <ul>
                    <li v-for="(item,index) in modeStatus" :key="index" :class="[userStatus.modeIndex == index ?'active':'']" @click.stop="modeChoosed(index)"><img src="/static/images/gou.png" alt="" srcset="">{{item}}</li>
                </ul>
                <button @click.stop="go('question',index)">开始答题</button>
            </div>
        </div>
        
    </div>
</template>


<script>
export default{
    data(){
        return{
            modeStatus:['模式','随机','调整'],
            userStatus:{
                modeIndex:-1,
                mark_isShow:false
            },
            nowDate:{
                month:'--',
                days:'--'
            }
        }
    },
    created(){
        const m = new Date().toLocaleString().match(/(\d{4})\/(\d{0,2})\/(\d{0,2})/)
        console.log(m)
        if(m[2]<10){
            m[2]='0'+m[2]
        }
        this.$set(this.nowDate,'month',m[1]+'-'+m[2])
        this.$set(this.nowDate,'days',m[3])
    },
    methods:{
        // 隐藏遮挡层
        markHidden(){
            console.log(123123123)
            this.$set(this.userStatus,'mark_isShow',false)
        },
        // 弹出来的模式选择
        modeChoosed(index){
            this.$set(this.userStatus,'modeIndex',index)
        },
        // 点击科目
        clickItem(mode,index){
            if(mode == 1 || mode == 2){
                this.$set(this.userStatus,'mark_isShow',true)
            }else{

            }
        },
        // 跳转
        go(url,login){
            wx.navigateTo({
                url:'/pages/'+url+'/main'
            })
        }
    }
}
</script>


<style lang="less" scoped>

.newIndex{
    .date{
        position: relative;
        width: 698rpx;
        height:326rpx;
        margin: 22rpx auto 70rpx;
        >img{
            display: block;
            width: 698rpx;
            height:326rpx;
        }
        .day{
            position: absolute;
            font-size:150rpx;
            color:#fffefe;
            bottom:100rpx;
            left:40rpx;
        }
        .month{
            position: absolute;
            font-size:30rpx;
            color:#ffffff;
            bottom:75rpx;
            left:50rpx;
            letter-spacing: 8rpx;
        }
    }
    
    .choose{
        background: white;
        box-sizing: border-box;
        padding: 0 60rpx 0 46rpx;
        h2{
            font-size:36rpx;
            color:#070707;
            line-height: 36rpx;
            overflow: hidden;
            font-weight: bold;
            span{
                font-size:28rpx;
                color:#1d42c7;
                float: right;
                font-weight: lighter;
                img{
                    width: 23rpx;
                    height:26rpx;
                    margin-left:24rpx;
                    position:relative;
                    top:4rpx;
                }
            }
        }
        ul{
            margin-top:26rpx;
            text-align: center;
            margin-bottom:54rpx;
            li{
                border:#0927b4 1px solid;
                display:inline-block;
                width: 185rpx;
                height:98rpx;
                border-radius: 10rpx;
                background: #edf3ff;
                text-align: center;
                line-height: 98rpx;
                &:nth-child(2){
                    margin: 0 35rpx;
                }
            }
            &:nth-child(4){
                li{
                    background: #ebfcf9;
                    border:1px solid #00b18c;
                }
            }
        }
    }
    .collect{
        padding: 24rpx 0 62rpx;
        ul{
            text-align: center;
            li{
                display: inline-block;
                margin: 0 25rpx;
                img{
                    width: 132rpx;
                    height:132rpx;
                }
                p{
                    margin-top:8rpx;
                    text-align: center;
                    font-size:32rpx;
                    color:#686868;
                }
            }
        }
    }

    .mark{
        background: rgba(0, 0, 0, 0.5);
        width:100vw;
        height:100vh;
        position: absolute;
        left:0px;
        top:0px;
        div{
            width:698rpx;
            height:528rpx;
            background: white;
            border-radius: 10rpx;
            position: absolute;
            left:50%;
            transform: translate(-50%,-50%);
            top:50%;
            box-sizing: border-box;
            text-align:center;
            h2{
                font-size:36rpx;
                color:#070707;
                text-align: left;
                margin-left: 10%;
                font-weight: bold;
                margin:30rpx 5% 50rpx;
                letter-spacing: 4rpx;    
            }
            ul{
                li{
                    display: inline-block;
                    width: 185rpx;
                    height:76rpx;
                    font-size:32rpx;
                    color:#070707;
                    border-radius: 38rpx;
                    border:1px solid #eeeeee;
                    line-height: 76rpx;
                    letter-spacing: 4rpx;
                    &:nth-child(2){
                        margin: 0 14rpx;
                    }
                    img{
                        // display: none;
                        width: 0rpx;
                        height:50rpx;
                        transition: width 0.5s;
                    }
                }
                .active{
                    background: #2757ef;
                    color:white;
                    img{
                        // display: inline-block;
                        width:50rpx;
                        height: 50rpx;
                        position: relative;
                        top:14rpx;
                        right:10rpx;
                    }
                }
            }
            button{
                width:452rpx;
                height:88rpx;
                border-radius:44rpx;
                font-size:36rpx;
                color:white;
                background: linear-gradient(to right,#1a3bc1,#5583f0);
                letter-spacing: 4rpx;
                position: absolute;
                bottom:80rpx;
                left:50%;
                transform: translateX(-50%);
                &:after{
                    border:none;
                }
            }
        }
    }
}
</style>

